<template>
  <el-dialog v-model="visible" title="课程表" :close-on-click-modal="false" draggable>
    <el-tabs v-model="queryForm.semester" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="item in list" :label="item.label" :name="item.value">
        <el-button @click="addCourse">添加课程</el-button>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="课程代码"/>
          <el-table-column prop="courseName" label="课程名"/>
          <el-table-column prop="teacherName" label="授课教师"/>
          <el-table-column>
            <template v-slot="scope">
              <el-button type="primary" @click="addTeacher(scope.row.id)">分配教师</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="visible_course" title="添加课程" :close-on-click-modal="false" draggable width="350">
    <el-select
        v-model="courseIds"
        multiple
        placeholder="可多选"
        style="width: 100%"
    >
      <el-option
          v-for="item in courseList"
          :key="item.value"
          :label="item.name"
          :value="item.id"
      />
    </el-select>
    <template #footer>
      <el-button @click="visible_course = false">取消</el-button>
      <el-button type="primary" @click="submitCourse">确定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="visible_teacher" title="添加教师" :close-on-click-modal="false" draggable width="350">
    <el-select
        v-model="teacherId"
        style="width: 100%"
    >
      <el-option
          v-for="item in teacherList"
          :key="item.value"
          :label="item.name"
          :value="item.id"
      />
    </el-select>
    <template #footer>
      <el-button @click="visible_teacher = false">取消</el-button>
      <el-button type="primary" @click="submitTeacher">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import type { TabsPaneContext } from 'element-plus'
import {
  useClassCourserApi,
  useClassSubmitApi,
  useSemesterCourseSaveApi,
  useSemesterTeacherSaveApi
} from "@/api/college/class";
import {useSemesterCourseSelectApi} from "@/api/college/cou";
import {useTeacherListApi} from "@/api/college/teacher";

const emit = defineEmits(['refreshDataList'])

const list = [
  {label: "第一学期", value: 1},
  {label: "第二学期", value: 2},
  {label: "第三学期", value: 3},
  {label: "第四学期", value: 4},
  {label: "第五学期", value: 5},
  {label: "第六学期", value: 6},
  {label: "第七学期", value: 7},
  {label: "第八学期", value: 8}
]

const visible = ref(false)
const visible_course = ref(false)
const visible_teacher = ref(false)
const dataFormRef = ref()
const courseList = ref<any[]>([])
const teacherList = ref<any>([])
const tableData = ref([])
const queryForm = reactive({
  classId: '',
  semester: 1,
})

const courseIds = ref<string[]>([])
const teacherId = ref("")

const init = (id: string) => {
  queryForm.classId = id
  visible.value = true
  getTabData()
}

/**
 * 获取表格数据
 */
function getTabData(){
  useClassCourserApi(queryForm).then(res=>{
    tableData.value = res.data
  })
}
let courseId = ""
/**
 * 获取教师列表
 */
function addTeacher(id: string){
  courseId = id
  visible_teacher.value = true
  useTeacherListApi().then(res=>{
    teacherList.value = res.data
  })
}

/**
 * 获取课程
 */
function addCourse(){
  visible_course.value = true
  useSemesterCourseSelectApi(queryForm).then(res=>{
    courseList.value = res.data
  })
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  queryForm.semester = tab.props.name as number
  getTabData()
}

// // 表单提交
// const submitHandle = () => {
//   dataFormRef.value.validate((valid: boolean) => {
//     if (!valid) {
//       return false
//     }
//     useClassSubmitApi(dataForm).then(() => {
//       ElMessage.success({
//         message: '操作成功',
//         duration: 500,
//         onClose: () => {
//           visible.value = false
//           emit('refreshDataList')
//         }
//       })
//     })
//   })
// }

/**
 * 提交
 */
function submitCourse(){
  useSemesterCourseSaveApi({...queryForm, courseIds: courseIds.value}).then(()=>{
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: ()=> {
        visible_course.value = false
        getTabData()
      }
    })
  })
}/**
 * 提交
 */
function submitTeacher(){
  useSemesterTeacherSaveApi({
    id:courseId,
    teacherId: teacherId.value
  }).then(()=>{
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: ()=> {
        visible_teacher.value = false
        getTabData()
      }
    })
  })
}

defineExpose({
  init
})
</script>
